<template>
	<view class="index" :style="{ height: '100vh', overflow: 'hidden', opacity: show ? 1 : 0 }">
		<view class="title" style="">扫码下单</view>
		<!-- <lyz-canvas isRenderImage style="width: 100vw;display: flex;align-items: center;justify-content: center;" :board="painting" @success="getImg" @fail="fail"></lyz-canvas> -->
		<!-- <button
			type="default"
			style="color: #fff;background:linear-gradient(90deg, #00aa00, #55aa7f);border-radius: 44rpx;width: calc(100vw - 60rpx);margin: 0rpx 30rpx 20rpx;"
			@tap="shareNow"
		>
			保存到相册
		</button>
		<uni-popup ref="popup" type="center">
			<view class="popup-content">
				<image style="width: 552rpx;height: 747rpx;" :src="posterUrl" mode=""></image>
				<button class="popup-content-btn" size="mini" style="" type="warn" @tap="download">保存到相册</button>
			</view>
		</uni-popup> -->
		<view class="box" style="">
			<view class="userName" style="">
				<image :src="userinfo.avatar" style="" mode=""></image>
				<text style="">{{ userinfo.nickname }}</text>
			</view>
			<!-- // 显示二维码的容器 -->
			<view class="codeBox" style="">
				<view class="border" style=""><canvas class="canvas" style="" canvas-id="myQrcode"></canvas></view>
			</view>
		</view>
		<button
			type="default"
			style="color: #fff;background:linear-gradient(90deg, #00aa00, #55aa7f);border-radius: 44rpx;width: calc(100vw - 60rpx);margin: 0rpx 30rpx 20rpx;"
			@tap="shareNow"
		>
			保存到相册
		</button>
		<uni-popup ref="popup" type="center">
			<view class="popup-content">
				<image style="width: 552rpx;height: 747rpx;" :src="posterUrl" mode=""></image>
				<button class="popup-content-btn" size="mini" style="" type="warn" @tap="download">保存二维码到手机</button>
			</view>
		</uni-popup>
		<!-- <view class="top">
      <view class="t1"  @tap="navigateTo('/pages/myDriving/recording')">提现记录</view>
      <view class="icon">&#xe61c;</view>
      <view class="t2">账户余额</view>
      <view class="t3">
        {{ userinfo.money }}
        <text>元</text>
      </view>
      <button class="button" type="primary" @tap="navigateTo('/pages/myDriving/withdraws')">提现</button> -->
		<!-- </view> -->
	</view>
</template>
<script>
import helper from '../../common/helper.js';
import api from '../../common/api.js';
import QRCode from '../../common/wxCode.js';
import lyzCanvas from '@/components/drawCode.vue';
import { LastMayday } from '@/common/code.js';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
export default {
	data() {
		return {
			userinfo: {},
			info: {},
			code: '',
			share_code: '',
			painting: '',
			posterUrl: '',
			show: false,
			map: {
				status: 4,
				page: 1,
				type: 'driver'
			},
			timer:''
		};
	},
	onShow() {
		this.getList();
		if(!this.time){
			this.timer = setInterval(() => {
			  this.getList();
			}, 5 * 1000);
		}
	},
	onLoad() {
		uni.showLoading({
			title: '二维码载入中...'
		});
		
		this.getUserInfo();
	},
	onUnload() {
		// 隐藏时关闭定时器
		if (this.timer) {
			clearInterval(this.timer);
			this.timer = '';
		}
	},
	onHide(){
		if (this.timer) {
			clearInterval(this.timer);
			this.timer = '';
		}
	},
	components: {
		lyzCanvas,
		uniPopup
	},
	methods: {
		async getUserInfo() {
			let res = await api.getUserInfo();
			this.userinfo = res.data;
			console.log(helper);
			this.createQrCode(helper.host + '?driver_id=' + this.userinfo.id, 'myQrcode', 185, 185);
		},
		// 立即分享
		shareNow() {
			this.download();
			// this.painting = new LastMayday();
		},
		navigateTo(url) {
			uni.navigateTo({
				url: url
			});
		},
		createQrCode: function(content, canvasId, cavW, cavH) {
			//调用插件中的draw方法，绘制二维码图片
			//this.canvasToTempImage 为绘制完成的回调函数，可根据自己的业务添加
			QRCode.api.draw(content, canvasId, cavW, cavH, this, this.canvasToTempImage);
			this.show = true;
		},
		async getList() {
			let res = await api.getOrderList(this.map);
			if (res.data.data.length > 0) {
				if(this.timer){
					clearInterval(this.timer);
					this.timer = '';
				}
				uni.redirectTo({
					url: '/pages/myDriving/drivingDetails?order_id=' + res.data.data[0].id
				});
		 }
		},
		//获取临时缓存图片路径，存入data中
		canvasToTempImage: function(canvasId) {
			let that = this;
			wx.canvasToTempFilePath({
				canvasId: 'myQrcode', // 这里canvasId即之前创建的canvas-id
				success: function(res) {
					let tempFilePath = res.tempFilePath;
					that.getImg(tempFilePath);
					console.log(tempFilePath);
				},
				fail: function(res) {
					console.log(res);
				}
			});
		},
		couponQrCode() {
			var that = this;
			this.code = new QRCode('myQrcode', {
				text: 'https://wx.fungyin.com?driver_id=' + this.userinfo.id,
				width: 120,
				height: 120,
				colorDark: '#333333',
				colorLight: '#FFFFFF',
				correctLevel: QRCode.CorrectLevel.H
			});
			this.initData();
		},

		getImg(e) {
			uni.hideLoading();
			this.posterUrl = e;
		},
		fail(e) {
			uni.hideLoading();
			console.log('绘制失败----' + JSON.stringify(e));
		},
		// 已保存到相册
		download() {
			let _this = this;
			this.set(_this.posterUrl);
		},
		set(url) {
			uni.authorize({
				scope: 'scope.writePhotosAlbum',
				success() {
					uni.saveImageToPhotosAlbum({
						filePath: url,
						success: function() {
							console.log('save success');
							uni.showToast({
								title: '已保存到手机',
								icon: 'success',
								duration: 2000
							});
						}
					});
				},
				fail: () => {
					uni.showModal({
						title: '您已拒绝获取相册权限',
						content: '是否进入权限管理，调整授权？',
						success: res => {
							if (res.confirm) {
								uni.openSetting({
									success: res => {
										console.log(res.authSetting);
									}
								});
							} else if (res.cancel) {
								return uni.showToast({
									title: '已取消！'
								});
							}
						}
					});
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.title {
	font-weight: bold;
	font-size: 42rpx;
	height: 150rpx;
	line-height: 150rpx;
	padding-left: 30rpx;
}
.box {
	box-shadow: 10rpx 15rpx rgba(76, 217, 100, 0.2);
	border: 15rpx solid rgba(76, 217, 100, 0.7);
	border-radius: 20rpx;
	padding: 20rpx;
	margin-bottom: 60rpx;
	width: 85vw;
	margin-left: 7.5vw;
	box-sizing: border-box;
	.userName {
		display: flex;
		flex-flow: column;
		justify-content: center;
		align-items: center;
		margin-top: 25rpx;
		text {
			font-weight: bold;
			font-size: 32rpx;
			margin-top: 25rpx;
		}
		image {
			width: 160rpx;
			height: 160rpx;
			border-radius: 50%;
			overflow: hidden;
		}
	}
}
.codeBox {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 30rpx;
	.border {
		width: 380rpx;
		height: 380rpx;
		// padding: 15rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		.canvas {
			width: 380rpx;
			height: 380rpx;
			// border: 5rpx solid rgba(76, 217, 100, 0.4);
		}
	}
}

page,
.index {
	background-color: #fbfbfb;
}
.top {
	text-align: center;
	padding: 30upx;
	background-color: #32c45e;
	color: #ffffff;
	.t1 {
		width: 100%;
		text-align: right;
		font-size: 26upx;
	}
	.icon {
		font-size: 160upx;
	}
	.t2 {
		padding: 10upx 0;
		font-size: 28upx;
	}
	.t3 {
		font-size: 50upx;
		text {
			font-size: 28upx;
		}
	}
	.button {
		width: 25%;
		background-color: #ffffff;
		color: #101010;
		font-size: 28upx;
		border-radius: 50upx;
		margin-top: 5%;
	}
}
.bottom {
	position: absolute;
	width: 100%;
	bottom: 0;
	height: 120upx;
	display: flex;
	align-items: center;
	justify-content: space-around;
	.item {
		width: 33.33%;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 24upx;
		.icon {
			font-size: 56upx;
			color: #999999;
		}
	}
}
.active {
	color: #32c45e !important;
	.icon {
		color: #32c45e !important;
	}
}
</style>
